<template>
	<view class="page">
		<view class="connection">
			<view class="t1"><view>联&nbsp;&nbsp;系&nbsp;&nbsp;人</view></view>
			<input v-model="authentication.nickName" style="border: none;width: 224px;margin-right: 15px; " type="text" placeholder="请输入姓名">
		</view>
		<view class="connection">
			<view class="t1"><view>联系手机</view></view>
			<input v-model="authentication.mobile" style="border: none;width: 224px;margin-right: 15px; " type="number" placeholder="请输入电话号码">
		<button  open-type="getPhoneNumber" style="width: 100px;margin-right: 0px;" @getphonenumber="getphonenumber"
			class="open-button getInfo bun">获取</button>
		</view>
		<view style="margin: 0px auto;width: 100%;margin-bottom: 20px;">
			<view class="idc">
				<view v-for="(image,index) in authentication.IDCARD" :key="index" @tap="chooseImage(index)">
					<image class="uni-uploader__img"  v-show="image!=''" :src="image" :data-src="image" />
				</view>
			</view>
			<view class="idc-title">
				<view>身份证正面</view>
				<view>身份证反面</view>
			</view>
		</view>
		<view class="reback" v-if="authenticationState==3">认证被驳回,原因是：{{authentication.option}}</view>
		<button class="button" v-if="!authenticationState||authenticationState==3" @click="savaInfo">提 交 认 证</button>
		<button class="button" v-if="authenticationState==1" >已 提 交 认 证 (待审核)</button>
		<button class="button" v-if="authenticationState==2" >认 证 成 功</button>
		<button class="button" v-if="authenticationState==2" @click="savaInfo" >保 存 修 改</button>
	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/common/WXBizDataCrypt.js');
	
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'hasLogin',
				userInfo: 'userInfo'
			})
		},
		data() {
			return {
				authenticationState:0,
				authentication:{
					mobile:'',
					option:'',
					nickName:'',
					IDCARD:['','']
				}
			}
		},
		onShow() {
			this.$api("user-center","getUserInfo").then(res=>{
				console.log(res.userInfo)
				res.userInfo.sessionKey=this.userInfo.sessionKey
				if(res.userInfo.authentication){
					this.authentication=res.userInfo.authentication
				}
				this.authenticationState=res.userInfo.authenticationState
			})
		},
		methods: {
			getphonenumber(e) {
				let pc = new WXBizDataCrypt(this.$appid, this.userInfo.sessionKey); //wxXXXXXXX为你的小程序APPID
				let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				this.authentication.mobile = data.phoneNumber
			},
			chooseImage(index){
				if(this.authenticationState&&this.authenticationState!=3){
					return
				}
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['compressed', 'original'],
					count: 1,
					success: (res) => {
						console.log(res)
						uni.showLoading({
							title:'上传中。。'
						})
						uniCloud.uploadFile({
							filePath: res.tempFilePaths[0],
							cloudPath: 'checkuser.jpg',
							success: (re) => {
								this.$set(this.authentication.IDCARD,index,re.fileID)
								uni.hideLoading()
							},
							fail: (err) => {
								uni.hideLoading()
								this.$msg("上传失败",e)
							}
						});
					}
				}) 
			},
			savaInfo() {
				console.log(this.authentication)
				if (!this.isPoneAvailable(this.authentication.mobile)) {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if(this.authenticationState==2){
					this.$api('user-center','updateUser', {authentication:this.authentication}).then(res=>{
						uni.showModal({
							title:'成功',
							content:'您的接单手机号已经成功修改',
							success: () => {
								uni.navigateBack()
							}
						})
					})
				}else{
					this.$api('user-center','updateUser', {authenticationState:1,authentication:this.authentication}).then(res=>{
						uni.showModal({
							title:'成功',
							content:'已提交审核',
							success: () => {
								uni.navigateBack()
							}
						})
					})
				}
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			}
			
		},
		onLoad() {}

	}
</script>

<style lang="less">
	.center-box{
		width: 270px;
		height: 370px;
		padding: 10px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 10px;
		button{
			background-image: linear-gradient(-90deg, 
			#3da180 0%, 
			#62c980 100%), 
			linear-gradient(
			#e8ecef, 
			#e8ecef);
			background-blend-mode: normal, 
			normal;
			border-radius: 45px;
			width: 80%;
			height: 35px;
			line-height: 35px;
			font-family: PingFangSC-Medium;
			font-size: 14px;
			letter-spacing: 0px;
			color: #ffffff;
		}
		.content1{
			text-align: left;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.7;
			height: 275px;
			overflow: scroll;
		}
		.head{
			height: 60px;
			display: flex;
			justify-content: space-between;
			.title{
				background-color: white;
				font-family: PingFangSC-Semibold;
				font-size: 19px;
				color: rgba(0, 0, 0, 1);
			}
		}
		
	}
	.reback{
		font-size: 12px;
		color: red;
		opacity: 0.5;
		text-align: center;
		margin: 15px auto;
	}
	.idc-title{
		display: flex;
		justify-content: space-around;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: rgba(0, 0, 0, 1);
		opacity: 0.5;
		view{
			line-height: 24px;
		}
	}
	.idc{
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin: 0px auto;
		margin-top: 15px;
		view{
			width: calc(50% - 10px);
			height: 150px;
			background-color: rgba(245, 245, 245, 1);
			border-radius: 5px;
			background: url(../../static/xz.png) no-repeat center;
			background-color: rgba(245, 245, 245, 1);
			background-size:100% 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.touxiang{
		margin: 0px auto;
		margin-top: 5px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 65px;
		line-height: 65px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
		image{
			width: 45px;
			height: 45px;
			margin: 10px;
		}
		.t1{
			text-align: center;
			width: 85px;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.5;
			padding-top: 26px;
			view{
				width: 85px;
				line-height: 13px;
				height: 13px;
				border-right: solid rgba(26, 26, 26,0.3) 1px;
			}
		}
	}
	.header{
		width: calc(100% + 30px);
		padding: 0px;
		margin: -15px -15px 0 -15px;
	}
	button:active,button:after,.button-hover{
		color: white;
		opacity: 0.5;    //这里重要，就是通过这个透明度来设置
		border: none;
	}
	.button{
		margin: 0px auto;
		margin-bottom:16px ;
		background-image: linear-gradient(-90deg, 
		#3da180 0%, 
		#62c980 100%), 
		linear-gradient(
		#e8ecef, 
		#e8ecef);
		background-blend-mode: normal, 
		normal;
		border-radius: 45px;
		width: 100%;
		height: 45px;
		line-height: 45px;
		font-family: PingFangSC-Medium;
		font-size: 14px;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.statement{
		text-align: center;
		margin: 0px auto;
		margin-top: 30px;
		margin-bottom: 15px;
		font-family: PingFangSC-Semibold;
		text-decoration: underline;
		font-size: 13px;
		letter-spacing: 0.3px;
		color: rgba(118, 216, 146, 1);
	}
	.list-pd{
		width: 330px;
		margin: 0px auto;
	}
	.content{
		margin: 0px auto;
		width: calc(100% - 30px);
		height: 145px;
		padding: 15px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
	}
	.loadimg{
		width: 100%;
		margin: 10px auto;
		.desc{
			font-family: PingFangSC-Regular;
			font-size: 11px;
			letter-spacing: 0.2px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.5;
			image{
			width: 13px;
			height: 13px;
			vertical-align: middle;
			}
		}
		
	}
	input{
		text-align: right;
		height: 45px;
		line-height: 45px;
		width: calc(100% - 56px);
	}
	.page{
		padding: 15px 15px;
	}
	.connection{
		margin: 0px auto;
		margin-top: 5px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
		.t1{
			text-align: center;
			width: 85px;
			line-height: 29px;
			height: 29px;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.5;
			padding-top: 16px;
			view{
				width: 85px;
				line-height: 13px;
				height: 13px;
				border-right: solid rgba(26, 26, 26,0.3) 1px;
			}
		}
		input{
			text-align: right;
			height: 45px;
			line-height: 45px;
			width: calc(100% - 90px);
		}
	}
	.title{
		display: flex;
		width: 330px;
		margin: 0px auto;
		height: 45px;
		line-height: 45px;
		background-color: rgba(245, 245, 245, 1);
		border-radius: 5px;
		.t1{
			text-align: center;
			width: 55px;
			line-height: 29px;
			height: 29px;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
			opacity: 0.5;
			padding-top: 16px;
			view{
				width: 55px;
				line-height: 13px;
				height: 13px;
				border-right: solid rgba(26, 26, 26,0.3) 1px;
			}
		}
		input{
			text-align: right;
			height: 45px;
			line-height: 45px;
		}
	}
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>
